import React from "react";
import {PropTypes} from "prop-types";
import '../Demo3.less'
import FunTest from "./funTest";
const FunComponent = function(props){
  //传递过来的props对象是被冻结的，不能删除、新增、修改、劫持,只能先结构，再对单个属性进行操作
  console.log(props)
  let {x}=props;
  x=200;
  let children = props.children;//入口文件双闭合调用，如果里面添加了其他标签，children则有值
  let foot = children.filter(item=>item.props.slot==='foot')
  console.log(children)
  //直接定义状态
  let day = '2022.9.27'
  return <div className="wrap">
    函数组件
    <br />
    {day}
    <h1>{props.x}</h1>
    <h2>{x}</h2>
    {children}
    {/* 若需拆分可根据slot名，对children进行筛选，children上有很多方法 */}
    {foot}
    <FunTest></FunTest>
 
  </div>
}
//给props的属性设置默认值
FunComponent.defaultProps={
  num:100
}
//给props的属性设置验证规则
FunComponent.propTypes={
  x:PropTypes.number.isRequired,
  y:PropTypes.string
}
export default FunComponent